<template>
	<view class="content" scroll-x>
		<u-swiper
		            :list="list1"
		            @change="change"
		            @click="click"
		    ></u-swiper>
			
		<navigator url="../add/add">123</navigator>
		<view class="logo">
		   <image src="../../static/01c4ad5add94aba801214a6102c6c6.jpg@1280w_1l_2o_100sh.jpg" mode="aspectFit">
		</view>
		
         <view style="text-align: center;">重磅推荐</view>
		<view v-for="(item,index) in reType1"  class="rebox">
			<view class="pic">
			<image :src="item.imageValue" mode="aspectFill" @click="godetail(item._id._value)">
			</view>
			<view class="des">
			<view>{{item.name}}</view>
			<view class="des2" style="position: relative;"> 
				<text>￥{{item.price}}</text>
				<u-icon name="plus-circle" size="28" color="red"
					@click="addNumber1(user_id,item._id._value,index,1)"></u-icon>
				<u-badge   :value="item._id.shoppingCarts[0].number" offset=[15] absolute></u-badge>
				</view>
			</view>
		</view>
		
		<view style="text-align: center;">走亲访友</view>
		<view class="gird">
			<view v-for="(item,index) in reType2" >
				<view class="pic">
				    <image :src="item.imageValue" mode="aspectFill" @click="godetail(item._id._value)">
				</view>
				<view class="des">
				<view>{{item.name}}</view>
				<view class="des2" style="position: relative;">
					<text>￥{{item.price}}</text>
					<u-icon name="plus-circle" size="28" color="red"
						@click="addNumber2(user_id,item._id._value,index,1)"></u-icon>
					<u-badge  :value="item._id.shoppingCarts[0].number" offset=[15] absolute></u-badge>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const db=uniCloud.database();
	const dbCmd=db.command;
	const cloudRecommend=uniCloud.importObject("recommend");
	const cloudShoppingCarts=uniCloud.importObject("shoppingCarts")
	export default {
		data() {
			return {
				list:[],
				reType1:[],
				reType2:[],
				title: 'Hello',
				recommendlist:[],
				 list1: [
				                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				                ]
			}
		},
		onLoad() {
            this.user_id = uni.getStorageSync("uni-id-pages-userInfo")._id
		},
		onShow(){
			this.getrecommendlist()
		},
		methods: {
			change(){
				
			},
			
			godetail(_id){
				uni.navigateTo({
					url:`/pages/detail/detail?&_id=${_id}`,
					})			
				},
				
          async getrecommendlist(){
			    let obj={number:0};
				const b= db.collection("recommendList").where({
				}).field("snack_id,recommend_type").getTemp();
				const a= db.collection("Snacks").field("_id,imageValue,name,price").getTemp();
				const c=db.collection("shoppingCarts").where({
					user_id:this.user_id}).getTemp();
				let res= await db.collection(a,b,c).get();
				console.log(res.result.data);
				for(let item of res.result.data){
					 if(item._id.shoppingCarts.length==0){
						 item._id.shoppingCarts.push(obj)
					 }
				 }
				let list=res.result.data.filter(item=>item._id.recommendList.length!=0)
				console.log(list);
				this.reType1=list.filter(item=>item._id.recommendList[0].recommend_type=="重磅推荐");
				this.reType2=list.filter(item=>item._id.recommendList[0].recommend_type=="走亲访友");
				console.log(this.reType2);
			},
			async addNumber1(user_id, snack_id, index,value) {
				this.reType1[index]._id.shoppingCarts[0].number++;
				cloudShoppingCarts.addCartNumber(user_id, snack_id,value).then(res => {
					console.log(res);
				})
			},
			async addNumber2(user_id, snack_id, index,value) {
				this.reType2[index]._id.shoppingCarts[0].number++;
				cloudShoppingCarts.addCartNumber(user_id, snack_id,value).then(res => {
					console.log(res);
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.content{
		width: var(--status-bar-width);
		box-sizing: content-box;
		background-color: #f7f7f6;
		.logo{
			width: 100%;
			text-align: center;
		}
		.rebox{
			width: 100%;
			.pic{
				padding: 50rpx;
				box-sizing: content-box;
			}
			.des{
				padding:20rpx 50rpx;
				box-sizing: content-box;
				// border-bottom: 2rpx solid red;
				.des2{
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
				}
			}
		}
		.gird{
			box-sizing: content-box;
			display: flex;
			width: 100%;
			flex-flow: wrap;
			padding: 50rpx;
		 
			.pic{
				width: 320rpx;
				height: 320rpx;
				margin-right: 40rpx;
				border:2rpx solid yellow;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.des{
				width: 320rpx;
				height: 150rpx;
				.des2{
					margin-top:5rpx;
					display: flex;
					justify-content: space-between;
				}
			}
			
			}
	}
</style>
